<template>
  <div class="life-day" style="color: white">
    <div class="title">
      {{data.createDay}}
    </div>

    <div class="content">
      <div class="statics">
        <Circle  :son-value="sonValue">
        </Circle>
      </div>

      <div class="tag-box" @click="openDalog()">
        <div class="tag-column">
            <div v-for="(item, index) in data.outSrcList" :key="item.describe" class="tag-line" >
              <TagTest :text='item.describe' :total-color="item.color"
                       fontSize="20px"  >
              </TagTest>

              <p  style="color:black;margin-left: 10px"> {{item.time}}次</p>
            </div>
          </div>
      </div>


      <div class="right-box">
        <div class="data-des">
          <div v-for="(label, key) in data.item" :key="key" class="item-p">
            <span  @click="changeMode" class="left">{{ labelText(key) }}:</span>
            <el-input @Clik.stop style="width: 100px" v-model="data.item[key]"  v-if="data.mode === 'edit'"></el-input>
            <span v-if="data.mode === 'view'">{{  data.item[key] }}</span>
          </div>
        </div>


        <div class="picture-box">
          <div class="face-picture-box">
              <div class="face-box">
                <SingleUpload ref="faceRef" :initUrl="faceUrl" :width="269" :height="273"></SingleUpload>
              </div>
              <div class="food-box">
                <el-input type="textarea" :value="aiFood"  :rows="4" ></el-input>
              </div>
          </div>

          <div class="hole-picture">
            <SingleUpload ref="holeRef" :initUrl="wholeUrl" :width="237" :height="380"> </SingleUpload>
          </div>
        </div>

      </div>

    </div>
  </div>

  <TagViewDialog ref="viewDialog" :src-list="data.srcList" @emitRefreshList="emit('emitRefreshList')"></TagViewDialog>
</template>


<script setup lang="ts">

import Circle from "@/views/novel/character/components/middle/statistics/Circle.vue";
import {onMounted, reactive, ref, toRef, watch} from "vue";
import type {CircleDataInter} from "@/type/novel/circle";
import TagTest from "@/views/novel/tag/components/Children/tagTest.vue";
import TagViewDialog from "@/views/club/life/Compent/TagViewDialog.vue";
import SingleUpload from "@/views/club/life/Compent/SingleUpload.vue";
import { createOneLifeDayApi} from "@/api/modules/life/lifeDay";
import type {LifeDayForm} from "@/api/types/life/lifeDay";
import {ElMessage} from "element-plus";


let props = defineProps({
  id : undefined,
  createDay: String,
  srcList : Array,
  faceUrl :  String,
  wholeUrl :  String,
  aiFood: String,
  item : Object
})

//所有数据中心
let data =reactive({
  id: props?.id ?? undefined,
  mode : "view" ,
  createDay: props?.createDay ?? '',
  srcList: props?.srcList ?? [],
  outSrcList : [],
  item: {
    weight: props?.item?.weight ?? 88.2,
    cost:  props?.item?.cost ?? 88.2,
    hair:  props?.item?.hair ?? 'small',
    ski:  props?.item?.ski ?? 'nono'
  }
})

let emit = defineEmits(['emitRefreshList'])

let sonValue = ref<CircleDataInter>({
  labels: ['代码', '游戏', '性', '学习', '沟通'],
  datasets: [
    {
      label: 'Pie Chart Example',
      data: [10, 20, 30, 30, 10], // 数据值 总数值为100
      backgroundColor: ['#FFCC99', '#99CCFF', '#FFFF99', '#FF99CC', '#CCFF99']
    }
  ],
  options: []
})

let viewDialog = ref()
let holeRef = ref()
let faceRef = ref()


let item = {
  id: 22,
  describe:'打游戏',
  color: 'rgba(255, 148, 2, 0.1)',
  remark:'test',


  id2: 33,
  color2:'rgba(32, 195, 66, 0.1)',
  describe2:'test2',
  remark2:'test2'
}

let changeMode = () => {
  if (data.mode === "view") {
    data.mode = 'edit'
  }else {
    data.mode = 'view'
  }
  console.log(data.mode)
}


let creatOneDay = () => {
  let faceUrl = faceRef.value.pictureUrl ?? ''
  let wholeUrl = holeRef.value.pictureUrl ?? ''

  let totalSave : LifeDayForm ={
    weight: data.item.weight,
    cost: data.item.cost,
    hair: data.item.hair,
    ski: data.item.ski,
    srcList : data.srcList,
    faceUrl,
    wholeUrl,
  }
  createOneLifeDayApi(totalSave).then(response => {
    ElMessage.success('保存成功')
  })

}


// 动态获取标签名称
let labelText = (key: string) => {
  const labels = {
    weight: '体重',
    cost: '钱',
    hair: '头发',
    ski: '皮肤',
  };
  return labels[key as keyof typeof labels] || '';
};

let openDalog = () => {
  if (data.id) {
    viewDialog.value.openLifeViewDialog(data.id)
    return
  }
  viewDialog.value.openLifeViewDialog()
}

//手动触发一次
onMounted(()=>{
  if (props.srcList && props.srcList.length > 0) {
    data.srcList = []
    data.srcList = toRef(props,'srcList')
  }
})

watch(()=>data.srcList,
    (newValue)=>{
      console.log('父子组件触发了更新123123')
      if (!newValue || newValue.length === 0) {
        return
      }
      let tempMap: Map<string, { id: number, time: number, describe: string, color: string }> = new Map();

      let totalTag: any[] = [];
      newValue.forEach((item: any) => {
        item.item.forEach((item2: any) => {
          totalTag.push(item2);
        });
      });

  totalTag.forEach((item: any) => {
    let target = {
      id: item.id,
      time: 1,
      describe: item.describe,
      color: item.color
    };

    if (tempMap.has(target.describe)) {
      let existing = tempMap.get(target.describe);
      if (existing) {
        existing.time += 1;  // Increase time
      }
      return;
    }
    tempMap.set(target.describe, target);
  });

    data.outSrcList = [...tempMap.values()]

    let labels = data.outSrcList.map(item => item.describe)
    let colors = data.outSrcList.map(item => item.color.replace(', 0.1)',' ,0.7)'))
    let datas = data.outSrcList.map(item => item.time)
      console.log('colorscolorscolorscolors',colors)
    sonValue.value.labels = labels
    sonValue.value.datasets[0].backgroundColor = colors
    sonValue.value.datasets[0].data = datas

    viewDialog.value.data.srcList = data.srcList


},{deep:true});


defineExpose({ data,creatOneDay })

</script>

<style scoped lang="scss">
.life-day{
  margin-top: 20px;
  min-height: 358px;
  position: relative;
  width: 100%;
  .title {
    color: black;
    font-size: 34px;
    text-align: center;
    justify-content: center;
    background-color: rgba(250,250,210, 0.8);
  }

  .content{
    position: relative;
    display: flex;
    width: 100%;
    min-height: 458px;
    justify-content: center;
    align-items: center;
    border: 4px solid rgba(250,250,210, 1); /* 红色实线边框 */
    box-sizing: border-box; /* 关键修复：边框包含在width内 */

    .statics{
      margin-left: 10px;
      width: 358px;
      height: 358px;
      margin-top: 10px;
    }

    .tag-box{
      width: 22%;
      height: 450px;
      margin-left: 5px;
      overflow: hidden;

      .tag-column{
        width: 100%;

        .tag-line{
          height: 30px;
          display: flex;
          align-items: center;
          white-space: nowrap;
        }
      }
    }

    .right-box{
      position: relative;
      width: 45%;
      height: 458px;
      margin-left: 50px;
      .data-des{
        position: relative;
        display: flex;
        color: black;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        height: 50px;
        .item-p{
          display: flex;
          white-space: nowrap;
          font-size: 20px;
          margin-right: 15px;
          .item-p.left {
            font-size: 35px; /* 让左边字体更大 */
          }
        }
      }

      .picture-box {
        position: relative;
        display: flex;
        width: 100%;

        .face-picture-box{
          width: 269px;
          background: black;
          margin-left: 20px;
          margin-top: 5px;
          .face-picture{
            position: relative;
            height: 273px;
          }
          .food-box{
            position: relative;
            height: 100%;
          }
        }

        .hole-picture {
          width: 237px;
          background: grey;
          height: 380px;
          margin-top: 5px;
          margin-left: 22px;
        }

      }
    }


  }

}


</style>